import Taro from '@tarojs/taro';
import {Image, View, Text} from '@tarojs/components';
import {connect} from "@tarojs/redux";
import {request, unite} from '../../../utils/index';
import './myDynamic.scss';
import CanIn from "../../../asset/images/can_in.png";
import Can from "../../../asset/images/can.png";
import none from "../../../asset/images/none.png";

class MyDynamic extends Taro.Component {
    config = {
        navigationBarTitleText: '动态圈相册',
        navigationBarBackgroundColor: '#F6F7F7'
    };

    state = {
        homeData: [],
        page: 1,
    };

    temp = {
        isLoading: false,
    };

    componentDidShow() {
        this.getMyDynamic();
    }

    getMyDynamic = () => {
        const {page} = this.state;
        this.temp.isLoading = true;
        const params = {
            url: '/momments/my',
            data:{
                pageNo: page,
                pageSize: 10,
            }
        };
        request(params).then(res => {
            this.temp.isLoading = false; //防止多次上拉加载
            if (res) {
                if(res.code == 200){
                    this.setState((prevState)=>({
                        homeData: page === 1 ? res.data : prevState.homeData.concat(res.data),
                    }));
                    //判断是否为最后一页
                    if (res.data.length < 10) {
                        this.temp.isLoading = true; //
                    }
                }
            }
        })
    };

    //跳转详情页
    skipDetail = (id, dtId) => {
        //id 课程id dtId 动态id
        Taro.navigateTo({
            url: `../../home/detail/detail?id=${id}&dtId=${dtId}`
        })
    };

    //动态点赞 取消赞
    isShouc = (isLike, dtId, index, e) => {
        e.stopPropagation(); //防止父级点击事件干扰
        //   isLike 0未点赞，1已点赞
        if(this.temp.onDisable) return;
        this.temp.onDisable = true;
        const params = {
            url: '/momments/likeOpt',
            data:{
                opt:  isLike == 0 ? 1 : 0,
                type: 0,
                uid: dtId,
            }
        };
        request(params, '', '', '', false).then(res => {
            this.temp.onDisable = false; //防止多次
            if (res) {
                if(res.code == 200) {
                    this.setState((prevState) => {
                        if (isLike == 0) { //未点赞
                            prevState.homeData[index].likeCount = Number(prevState.homeData[index].likeCount) + 1;
                            prevState.homeData[index].isLike = 1;
                        } else { //已点赞
                            prevState.homeData[index].likeCount = Number(prevState.homeData[index].likeCount) - 1;
                            prevState.homeData[index].isLike = 0;
                        }
                        return{
                            homeData: prevState.homeData
                        }
                    })
                }
            }
        })
    };

    //底部上拉刷新加载更多
    onReachBottom() {
        if(this.temp.isLoading) return;
        this.setState((pervState) =>({
            page: pervState.page + 1
        }),() => {
            this.getMyDynamic();
        })
    };

    render() {
        const {homeData} = this.state;
        return (
            <View className="myDynamic">
                <View className="home-top-wrap">
                    <View className="home-list-content flex-lr">
                        {homeData && homeData.map((item, index) => (
                            <View className="home-list home-list-next" key={index} onClick={this.skipDetail.bind(this, item.dispatchId, item.momentId)}>
                                <View className="img-ck">
                                    <Image className="imgs" src={item.imgs[0].imgUrl} mode="aspectFill"/>
                                </View>
                                <View className="home-details">
                                    <View className="home-name text-overflow-two">{item.title}</View>
                                    <View className="flex-lr detail-title">
                                        <View className="flex-l">
                                            <Image className="heads" src={item.authorAvatar}/>
                                            <View className="text-name text-overflow">{item.authorName}</View>
                                        </View>
                                        <View className="flex-r" onClick={this.isShouc.bind(this, item.isLike, item.momentId, index)}>
                                            <Image className="cans" src={item.isLike == 1 ? CanIn : Can} mode="aspectFit"/>
                                            <View>{item.likeCount}</View>
                                        </View>
                                    </View>
                                </View>
                            </View>
                        ))}
                    </View>
                    {homeData && homeData.length == 0 &&(
                        <View className="none" style="margin:0 auto;margin-top: 160px;">
                            <View>暂无图片</View>
                            <View style="color:#008589;font-size: 32rpx;margin-top: 10px;" onClick={() => {Taro.switchTab({url: `/pages/home/home`})}}>前往动态圈 〉</View>
                        </View>
                    )}
                </View>
            </View>
        )
    }
}

const mapStateToProps = state => {
    let {} = state;
    return {
    }
};

const mapDispatchToProps = {
};

export default connect(mapStateToProps, mapDispatchToProps)(MyDynamic);



